import nanoid from "../Lib/nanoid";
import { onMounted, ref } from "vue";
import type { Ref } from "vue";
import axios from "axios";
import { getSeckillList, getProList } from "../api/api";
import { Toast } from "vant";
import { useRouter } from "vue-router";



interface IBannerItem {
  alt: string;
  bannerid: string;
  flag: boolean;
  img: string;
  link: string;
}

interface ICountDownContent { 
  content: string;
  time: string;
}

interface ISeckillItem {
  img1: string;
  originprice: number;
  proid: string;
  proname: string;

}
interface IAPISeckill {
  code: string;
  data: ISeckillItem[];
  message: string;
}


// 轮播图区域
export const useSwiper = () => {
  const bannerList: Ref<IBannerItem[]> = ref([]);

  const mockBannerList = async () => {
    const res = await axios.get("api/banner/list");
    if (res.data.code === "200") {
      bannerList.value = res.data.data;
    }
  };

  onMounted(() => {
    mockBannerList();
  });

  return {
    bannerList,
  };
};

// 宫格区域
export const useGridList = () => {
  const gridList = ref([
    {
      id: nanoid(),
      text: "京东超市",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "数码电器",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东新百货",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东生鲜",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东到家",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东超市",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "数码电器",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东新百货",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东生鲜",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
    },
    {
      id: nanoid(),
      text: "京东到家",
      url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
    },
  ]);

  return {
    gridList,
  };
};

// 秒杀区域
export const useSeckillList = () => {
  const countDown: Ref<number> = ref(3600 * 1000);
  const countDownContent: Ref<ICountDownContent> = ref({
    content: "v我50秒杀",
    time: "12点场",
  });
  const apiSeckillList: Ref<ISeckillItem[]> = ref([]);
  const seckillList = async () => {
    const res = (await getSeckillList({ count: 1 })) as unknown as IAPISeckill;
    if (res.code === "200") {
      apiSeckillList.value = res.data;
    } else {
      Toast.success(res.message);
    }
  };

  onMounted(() => {
    seckillList();
  });

  return {
    countDown,
    countDownContent,
    apiSeckillList,
  };
};

// 商品列表区域
export const useProductList = () => {
  const loading = ref(false);
  const finished = ref(false);
  const router = useRouter();

  const productList: Ref<ISeckillItem[]> = ref([]);
  const count: Ref<number> = ref(1);
  const refreshLoading = ref(false);
  const APIGetproList = async () => {
    const res = (await getProList({
      count: count.value,
    })) as unknown as IAPISeckill;
    // console.log(res);
    
    if (res.code === "200") {
      productList.value = res.data;
    }
  };

  // 上拉加载
  const onLoad = () => {
    loading.value = true;
    count.value += 1;
    getProList({ count: count.value }).then((res) => {
      loading.value = false;
      if (res.data.length === 0) {
        finished.value = false;
        return false;
      }
      productList.value = productList.value.concat(res.data);
    });
  };

  // 下拉刷新
  const onRefresh = () => {
    count.value = 1;
    productList.value = [];
    APIGetproList();
    refreshLoading.value = false;
  };
  const goToDetail = (id: string) => {
    // console.log(id);
    router.push({
      path: "/detail",
      query: {
        id,
      },
    });
  };

  onMounted(() => {
    APIGetproList();
  });

  return {
    refreshLoading,
    onRefresh,
    loading,
    finished,
    onLoad,
    productList,
    goToDetail
  };
};
